<template>
  <s-layout 
    title="" 
    navbar="inner" 
    :bgStyle="{
      color: '#346FFD',
    }">
    <view class="store-wrap" v-show="state.shopId">
      <detail-navbar 
        :title="state.shopInfo.name" 
        :thumb="state.shopInfo.thumb" 
        :titleStyle="{ color: '#000', fontSize: 32, fontWeight: 'bold' }" 
      />
      <view class="content-box">
        <view class="blue"></view>
        <view class="store-top">
          <store-top 
            :thumb="state.shopInfo.thumb"
            :name="state.shopInfo.name"
            :rating="state.rating"
          ></store-top>
          <view class="tab-wrap">
            <view class="sort-tabs">
              <view
                v-for="tab in tabList"
                :key="tab.key"
                class="sort-tab"
                :class="{ active: state.activeTab === tab.key }"
                @click="onTabClick(tab.key)"
              >
                {{ tab.label }}
                <view v-if="tab.key" class="arrows">
                  <view
                    class="arrow up"
                    :style="{
                      'border-bottom-color': state.activeTab === tab.key && state.sortOrder === 'asc' ? '#e23d3d' : '#b3b3b3'
                    }"
                    @click.stop="onArrowClick(tab.key, 'asc')"
                  ></view>
                  <view
                    class="arrow down"
                    :style="{
                      'border-top-color': state.activeTab === tab.key && state.sortOrder === 'desc' ? '#e23d3d' : '#b3b3b3'
                    }"
                    @click.stop="onArrowClick(tab.key, 'desc')"
                  ></view>
                </view>
              </view>
            </view>
            <view class="action-right">
              <view class="aicon-btn" @tap="toggleLayout">
                <image class="icon" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250523/99f59a06c8ca3d58dbc0fb63300d57ee.png"></image>
                <view class="text">排列</view>
              </view>
              <view class="aicon-btn" @tap="handleEditGoods">
                <image class="icon" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250523/29f022700515dc1a6c639e677efbabe7.png"></image>
                <view class="text">编辑</view>
              </view>
            </view>
          </view>
        </view>
       
        <view :class="{'lists1': state.layout == 'vertical', 'lists2': state.layout == 'horizontal'}">
          <view class="list-item" v-for="item in state.goodsList" :key="item.id">
            <product
              :layout="state.layout"
              :product="item"
              :isEdit="state.isEdit"
              :isSelected="state.selectIds.includes(item.id)"
              @select="handleSelectProduct"
            />
          </view>
        </view>

        <s-empty 
          v-if="state.goodsList.length === 0"
          icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据">
        </s-empty>
      </view>

      <!-- 编辑按钮 -->
      <view class="select-all-btn" v-if="state.isEdit">
        <view class="circle"></view>
        <view class="text">全选</view>
        <view class="btn">删除({{ selectedCount }})</view>
      </view>
      <view class="action-all-btn" v-if="!state.isEdit">
        <view class="img" v-for="(tab, index) in tabsENum" @tap="toPage(tab)">
          <image :src="tab.img"></image>
          <view class="brumb" v-if="index==1">12</view>
        </view>
      </view>
    </view>
    <view v-show="!state.shopId">暂无店铺</view>
  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad,onPageScroll } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import DetailNavbar from './components/detail-navbar.vue';
import StoreTop from './components/StoreTop.vue';
import product from './components/product.vue';
import { tabsENum } from './tools/enum'

const tabList = [
  { key: '', label: '综合' },
  { key: 'price', label: '价格' },
  { key: 'create_time', label: '佣金' }
]

const state = reactive({
  currentTab: 1,
  rating: 4,
  activeTab: '',
  sortOrder: 'desc', // 'asc' or 'desc'
  layout: 'vertical',// vertical=竖排 horizontal=横排
  goodsList: [],
  shopId: '',
  userId: '',
  shopInfo: {}, 
  selectIds: [], // 保存选中商品的id
  isEdit: false, // 编辑商品全选状态
});
const userInfo = computed(() => sheep.$store('user').userInfo);
state.shopId = userInfo.value.cyq_store_id
state.userId = userInfo.value.id
console.log(state.shopId, 'state.shopId ==1111')

const toPage = tab => {
  if (tab.url) sheep.$router.go(tab.url)
}
// 店铺列表
async function getList() {
  try {
    const params = {
      id: state.shopId
    }

    const { data, error, msg } = await sheep.$api.store.getNormalStoreGoods(params)
    console.log(data, error, msg, 'data, error, msg')
    if (error == 0) {
      state.goodsList = data
    } else {
      uni.showToast({
        title: msg,
        icon: 'none',
      })
    }
  } catch(error) {
    throw error
  }
}
onPageScroll(()=>{})
const handleSelectProduct = (productId) => {
  const index = state.selectIds.indexOf(productId);
  if (index === -1) {
    state.selectIds.push(productId);
  } else {
    state.selectIds.splice(index, 1);
  }

  console.log(state.selectIds,'selectIds====')
}

const selectedCount = computed(() => state.selectIds.length);

// 店铺信息
const getShopInfo = async () => {
  try {
    const { data, error, msg } = await sheep.$api.store.getNormalStoreInfo({
      id: state.shopId
    })

    if (error == 0) {
      state.shopInfo = data
      console.log(state.shopInfo, 'state.shopInfo ===')
    } else {
      uni.showToast({
        title: msg,
        icon: 'none',
      })
    }
    
  } catch (error) {
    throw error
  }
  
}

const handleEditGoods = () => {
  if (state.goodsList.length == 0) return
  state.isEdit = !state.isEdit
}


console.log(userInfo.value, 'userInfo===')

onLoad(async () => {
  console.log(userInfo.value.cyq_store_id, 'cyq_store_id')
  console.log(222222222222222)
  await getShopInfo()
  await getList();
})

const toggleLayout = () => {
  state.layout = state.layout == 'vertical' ? 'horizontal' : 'vertical'
}


const onTabClick = (tabKey) => {
  if (state.activeTab === tabKey) {
    // 切换排序方向
    state.sortOrder = state.sortOrder === 'asc' ? 'desc' : 'asc';
  } else {
    state.activeTab = tabKey;
    state.sortOrder = 'desc'; // 默认降序
  }
  // 这里可以触发排序逻辑
}
const onArrowClick = (tabKey, order) => {
  if (state.activeTab === tabKey && state.sortOrder === order) return;
  state.activeTab = tabKey;
  state.sortOrder = order;
  // 这里可以触发排序逻辑
}


</script>
<style lang='scss' scoped>
@import './style/store.scss';
.sort-tab.active .arrow.up {
  border-bottom-color: v-bind('state.sortOrder === "asc" ? "#e23d3d" : "#b3b3b3"');
}
.sort-tab.active .arrow.down {
  border-top-color: v-bind('state.sortOrder === "desc" ? "#e23d3d" : "#b3b3b3"');
}
</style>